import * as React from 'react';
import { useState, useEffect } from 'react';
import './login.less';
import logo from '@/asset/logo.png';
import { history } from 'umi';
import { Form, Input, Button, Dialog } from 'antd-mobile';

export default function login() {
  const onFinish = (values: any) => {
    sessionStorage.setItem('token', values.username);
    sessionStorage.setItem('activePath', '/index/home');
    history.push('/index/home');
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <div className="loginBox">
      <div className="logo">
        <img src={logo} alt="" />
        <p>长春农安经济开发区</p>
        <h3>欢迎登录</h3>
      </div>
      <div className="login">
        <Form
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          footer={
            <Button
              block
              type="submit"
              shape="rounded"
              color="primary"
              size="large"
            >
              登录
            </Button>
          }
        >
          <Form.Item
            name="username"
            label="姓名"
            rules={[{ required: true, message: '姓名不能为空' }]}
          >
            <Input placeholder="请输入姓名" />
          </Form.Item>
          <Form.Item
            name="password"
            label="密码"
            rules={[{ required: true, message: '密码不能为空' }]}
          >
            <Input type="password" placeholder="请输入密码" />
          </Form.Item>
          <Form.Item>
            <span style={{ fontSize: '12px', color: '#cccccc' }}>忘记密码</span>
          </Form.Item>
        </Form>
        <div className="bottom">
          <Button block type="submit" shape="rounded" size="large">
            游客
          </Button>
        </div>
      </div>
    </div>
  );
}
